export default class MessageBox {
    constructor() {
        this.config = {
            title: "提示框",
            message: "",
            showCancelButton: "",
            
        };
        if (!arguments.length) {
            console.warn("MessageBox must needs some arguments");
            return;
        } 
        //判断参数是何种格式
        if (typeof arguments[0] === "object") {
            this.config = Object.assign({}, this.config, arguments[0]);
        } else if (typeof arguments[0] === "string") {
            this.config.title = arguments[0];
            this.config.message = arguments[1];
        }
    }
    //生成dom的方法
    static createDom(type) {
        // console.log("生成dom的方法");
        let rootEl = document.querySelector(this.rootElSelector);
        let htmlPart = {
            "normal": `<div>${this.config.message}</div>`,
            "prompt": `<div>
                           <input type="${this.config.inputType}" placeholder="${this.config.inputValue}"/>
                       </div>`
        }
        // console.log(rootEl);
        let box = document.createElement("div");
        box.setAttribute("class", "m-msg-box");
        let dialog = `
            <div class="m-msg-dialog-box">
                <div class="m-msg-dialog-header">${this.config.title}</div>
                <div class="m-msg-dialog-content">${htmlPart[type]}</div>
                <div class="m-msg-dialog-footer">
                    <div class="m-msg-dialog-confirm">确定</div>
                    ${this.config.showCancelButton ? "<div class='m-msg-dialog-cancel'>取消</div>" : ''}
                </div>
            </div>
        `;
        box.insertAdjacentHTML("beforeend", dialog);
        
        // //生成dialog的box
        // let dialogBox = document.createElement("div");
        // dialogBox.setAttribute("class", "m-msg-dialog-box");
        // //生成dialog的头部
        // let dialogHeader = document.createElement("div");
        // dialogHeader.setAttribute("class", "m-msg-dialog-header");
        // dialogHeader.insertAdjacentHTML("beforeend", this.config.title);
        // //生成dialog的内容区域
        // let dialogContent = document.createElement("div");
        // dialogContent.setAttribute("class", "m-msg-dialog-content");
        // dialogContent.insertAdjacentHTML("beforeend", this.config.message);
        // //生成footer区域
        // let dialogFooter = document.createElement("div");
        // let canfirmBtn = document.createElement("div");
        // //如果有取消按钮
        // if (this.config.showCancelButton) {
        //     let cancelBtn = document.createElement("div");
        //     cancelBtn.insertAdjacentElement("beforeend", "取消");
        //     dialogFooter.appendChild()
        // }
        // dialogFooter.setAttribute("class", "m-msg-dialog-content");
        // dialogFooter.insertAdjacentHTML("beforeend", this.config.message);

        // dialogBox.appendChild(dialogHeader);
        // dialogBox.appendChild(dialogContent);
        // dialogBox.appendChild(dialogFooter);
        // box.appendChild(dialogBox);
        // box.querySelector(".m-msg-dialog-confirm").onclick = () => {
        //     this.config.state = "resolve";
        // };
        // box.querySelector(".m-msg-dialog-cancel") && (
        //     box.querySelector(".m-msg-dialog-cancel").onclick = () => {
        //         this.config.state = "reject";
        //     }
        // );
        return rootEl.appendChild(box);

        
    }

    // confirm按钮的事件
    static confirm() {
        
    }

    /**
     * 
     */
    static MessageBox() {

    }

    /**
     * confirm方法
     */
    static confirm(message = "确定要进行此操作吗？", title = "提示") {
        this.config.message = message;
        this.config.title = title;
        console.log("this", this);
        console.log("this.config", this.config);

        let dialog = this.createDom("normal");
        console.log("dialog", dialog);
        return {
            then (resolve, reject = () => {console.log("取消事件")}) {
                dialog.querySelector(".m-msg-dialog-confirm").onclick = resolve;
                if (dialog.querySelector(".m-msg-dialog-cancel")) {
                    
                    dialog.querySelector(".m-msg-dialog-cancel").onclick = reject;
                }
            }
        }
        // return new Promise((resolve = () => {}, reject = () => {console.log("取消事件")}) => {

        //     if (this.config.state === "resolve") {
        //         resolve();
        //     } else if (this.config.state === "reject") {
        //         reject();
        //     }
        // });
    }
    
}

//定义静态属性
MessageBox.config = {
    title: "提示",
    message: "确定要进行此操作吗？",
    showCancelButton: true,
};

MessageBox.rootElSelector = ".container-box";